<template>
	<div class="container">

		<!-- 头部信息 begin -->
			<div class="aui-header">
				<div class="aui-header-box clearfix">
					<div class="aui-header-logo">
						<a href="index.html">
							<img src="/static/themes/img/logo/logo-news.png" alt="">
						</a>
					</div>
					<div class="aui-header-sou">
						<!--<a href="search.html">-->
							<!--<span><i class="aui-iconfont aui-icon-search"></i></span>-->
						<!--</a>-->
					</div>
				</div>
			</div>
		<!-- 头部信息 end -->

		<!-- 内容信息 begin -->
		<div style="margin-top:45px; padding-bottom:49px;min-height:620px;">

			<scroller :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
			
			<div v-for="x in newList">
				<div class="aui-card-list" v-if="x.news_id==first">
					<router-link :to="{name:'news_page',params:{id:x.news_id}}">
						<div class="aui-card-list-header aui-card-list-user">
							<div class="aui-card-list-user-avatar">
								<img src="/static/themes/img/ad/f-n0.jpg" class="aui-img-round">
							</div>
							<div class="aui-card-list-user-name">
								<div class="aui-text-info">胖子</div>
								<!-- <div class="aui-font-size-12 text-light">新闻圈</div> -->
							</div>
							<div class="aui-card-list-user-info text-light">{{x.news_time|formatDate}}</div>
						</div>
						<!-- <div class="aui-card-list-content-padded aui-padded-t-5 aui-padded-b-5" v-html="x.news_content"></div> -->
						<div class="aui-card-list-content-padded aui-padded-t-5 aui-padded-b-5" style="text-indent: 2em;" >{{x.news_content|textFilter}}</div>
						<!-- <div class="aui-card-list-content" style="padding:0 10px;">
							<div class="aui-row aui-row-padded">
								<div class="aui-col-xs-12">
									<img src="/static/themes/img/ad/f-n0.jpg">
								</div>
							</div>
						</div> -->
						<div class="aui-card-list-footer text-light size-color">
							<div>
								<i class="aui-iconfont aui-icon-display"></i> {{x.news_reads}}
							</div>
							<!-- <div>
								<i class="aui-iconfont aui-icon-comment"></i> 666
							</div> -->
							<div>
								<i class="aui-iconfont aui-icon-laud"></i> {{x.news_likes}}
							</div>
						</div>
					</router-link>
				</div>
				<section class="aui-middle-dome" v-else>
					<router-link :to="{name:'news_page',params:{id:x.news_id}}">
						<a href="javascript:;" data-action-label="click-a" data-tag="news" class="aui-middle-dome-a">
							<div class="aui-middle-dome-title">
								<h3>{{x.news_title}}</h3>
								<div class="aui-middle-dome-text">
									<div class="clearfix">
										<span class="aui-title" style="display:block">{{x.news_time|formatDate}}</span>
										<span class="aui-comment">已阅读 {{x.news_reads}}</span>
									</div>
								</div>
							</div>
							
							<div class="aui-middle-dome-img">
								<img :src="x.news_pic" :alt="x.news_title">
							</div>
						</a>
					</router-link>
				</section>
			</div>

			</scroller>
			
		</div>

		<!-- 内容信息 end -->
	</div>
</template>

<script>
	export default {
		name:'focus',
		components:{},	// 再加 子组件
		// 方法
		created(){	//组件已创建 属性已绑定 DOM文档内容还未生成时所触发
			// 很早就会触发的
			this.$store.commit('mucate',1)
			// alert(1)
		},
		mounted(){	// 在DOM文档渲染结束后执行的，也就是再这里去植入插件代码
			// 脚本
			
		},
		// 计算属性
		computed:{
			// 写函数
			newList:function(){
				// 函数返回结果
				return this.$store.state.news.newList
			},
			first(){
				return this.$store.state.news.first
			}
		},
		methods:{
			// 写事件函数
			/**
		     * 下拉刷新
		     */
		    refresh(done) {
		      	// 要默认第1页
		      	// 刷新页面
		   		this.$store.dispatch('acPn',1);
		   		this.$store.commit('munewEmpty');
		   		done(true);  //阻止循环调用
        		return;
		    },

		    /**
		     * 上拉获取下一页的数据（会自动调用）
		     */
		    infinite(done) {
		      // 页码要加一
		      setTimeout(()=>{
				var pn = this.$store.state.news.pn;
				var cid = this.$store.state.news.cid;

				// 每次上拉加载，获取下一页的数据
				this.$store.dispatch('acNewList',cid)

				this.$store.dispatch('acPn',++pn);	// 页码+1

				done(true);  //阻止循环调用
        		return;
		      },1000)
		    },
		},
		// 数据筛选，比如转换时间格式
		filters:{
			formatDate: function (value) {
				let date = new Date(value*1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
			},
			textFilter(value){
				value = value.replace(/<img(.*?)>/g, "")
				value = value.replace(/<p>/g, "")
				value = value.replace(/<\/p>/g, "")
        		value = value.substr(0,100) + '...' ;
				return value;
			}
		}
	}

</script>

<style>
	

</style>